import { useState, useMemo, useEffect, ReactNode, ReactChild } from 'react';
import Debug from 'debug';

const debug = Debug('父子组件事件顺序');

function useTest(name: string) {
  useEffect(() => {
    debug('useEffect open ' + name);
    return () => {
      debug('useEffect close ' + name);
    }
  }, []);
  useState(() => debug('useState ' + name));
  useMemo(() => debug('useMemo ' + name), []);
}


function Child1() {
  useTest('child1');
  return null;
}

function Child2(p: { children: ReactNode }) {
  useTest('child2');
  console.log(p.children);
  return null;
}

function Page1() {
  useTest('parent');
  return (
    <div>
      <Child1 />
      <Child2 >
        {' '}
        {true}
        {/* 各种写法的结果最终一样 */}
        <div>1</div>
        {<div>2</div>}
        {true && (<div>3</div>)}
      </Child2>
      Page1
    </div>
  );
}

export default Page1;
